<template>
    <div class="table">
              <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    运营管理
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>消息推送</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
   </div>
            <div class="handle-box">
             <el-button type="success" icon="plus" class="handle-del mr10" @click="addBanner()"><i class="iconfont icon-add-s" style="font-size:14px;margin-right:5px;"></i>推送消息</el-button>
        </div>

        <el-table :data="bannerCenter" border style="width: 100%" ref="multipleTable"  @selection-change="handleSelectionChange">
         
            <el-table-column prop="a_type_name" label="推送标题">
             <template scope="scope">
              {{scope.row.name}}
            </template>
            </el-table-column>
       
            <el-table-column prop="a_type_name" label="推送内容">
             <template scope="scope">
              {{scope.row.content}}
            </template>

            </el-table-column>
       
       
            <el-table-column prop="a_type_name" label="推送时间">
             <template scope="scope">
              {{scope.row.createTime}}
            </template>
            </el-table-column>
         
            <el-table-column label="操作" width="250" >
                <template scope="scope">
        
                    <el-button size="small"     @click="handleEdit(scope.row)">重新推送</el-button>
                    <el-button size="small" type="danger"   @click="handleDelete(scope.row)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>
  


<el-dialog title="推送消息" :visible.sync="setBannerInfo">
  <el-form label-width="50px">
    <el-form-item label="标题">
      <el-input type="input"  style="width:200px;" placeholder="推送标题" v-model="bannerInfo.owe_banner_name" auto-complete="off"></el-input>
    </el-form-item>

  <el-form-item label="内容">
      <el-input type="textarea"  style="width:200px;"  placeholder="推送内容" v-model="bannerInfo.owe_banner_name" auto-complete="off"></el-input>
    </el-form-item>

   
  </el-form>
  <div slot="footer" class="dialog-footer">
     <el-button type="default" @click="closeEdit">关闭</el-button>
    <el-button type="danger" @click="saveBannerInfo">立即推送</el-button>
  </div>
</el-dialog>
        <loading v-if="loading" :tip='tip'></loading>
 </div>
</template>

<script>
import * as rpConfig from '../../../../rpConfig/constant'
import { HttpReq } from '../../../service/server'
import {api,apiGet,apiPut,apiDelete} from '@/api/index';
import loading from "@/components/common/loading.vue";
var Server = new HttpReq()
export default {
    data() {
        return {
          loading:false,
            uploadURI: rpConfig.API_URI + '/Helpapi/uploadImg',
            bannerInfo:{
                owe_banner_id:0,
                owe_banner_name:'',
                owe_banner_link:'',
                owe_banner_img:'',
                owe_banner_show_img:'',
                owe_banner_order:0
            },
            bannerCenter: [],
            setBannerInfo:false,
            dialogVisible: false,
            dialogImageUrl: ''
        }
    },
    created() {
      //  this.getData()
       
    },
    components: {
      loading,
    },
    computed: {

    },
    methods: {
      getList(){
            this.tip='获取广告推送列表'
            this.loading=true;
            apiGet.messageTemplate.messageTemplateList(this.params).then(res=>{
                //console.log(res);
                this.loading=false;
                this.all_page=res.totalElements;
                this.bannerCenter=res.content;
            })
        },
        handleCurrentChange(val) {
            this.cur_page = val
            this.getData()
        },
        handleCoverSuccess(res) {
    
            if (res.code != 200) {
                this.$message.error(res.msg)
            } else {
                this.bannerInfo.owe_banner_show_img = res.data.url
                this.bannerInfo.owe_banner_img = res.data.saveUrl
            }
        },
        getData() {
            let self = this
            Server._POST(
                rpConfig.API_URI + '/oweset.Banner/getBanner',
                {
                 
                },
                function(res) {
                    self.bannerCenter = res.data
                }
            )
        },
    

        closeEdit() {
            this.setBannerInfo = false
        },

        saveBannerInfo() {  
            let self = this
            Server._POST(rpConfig.API_URI + '/oweset.Banner/saveBannerInfo',self.bannerInfo,
                function(response) {
                    self.$message.success(response.msg)
                    self.closeEdit()
                    setTimeout(()=>{
                        self.getData()
                    },2000)
        
                })
        },

        handleEdit(row) {
            this.bannerInfo.owe_banner_id = row.owe_banner_id
            this.bannerInfo.owe_banner_name = row.owe_banner_name
            this.bannerInfo.owe_banner_link =row.owe_banner_link
            this.bannerInfo.owe_banner_show_img =row.owe_banner_show_img
            this.bannerInfo.owe_banner_img =row.owe_banner_img
            this.bannerInfo.owe_banner_order = row.owe_banner_order
            this.setBannerInfo=true
        },
        addBanner(){

            this.bannerInfo.owe_banner_id =0
            this.bannerInfo.owe_banner_name ='' 
            this.bannerInfo.owe_banner_link =''
            this.bannerInfo.owe_banner_show_img =''
            this.bannerInfo.owe_banner_img =''
            this.bannerInfo.owe_banner_order = 0
            this.setBannerInfo=true 
        },
        handleDelete(row) {
            let self = this
            Server._POST(
                rpConfig.API_URI + '/oweset.Banner/deleteBannerItem',
                { item_id: [row.owe_banner_id] },
                function(response) {
                    self.$message.success(response.msg)
                    self.getData()
                }
            )
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        }
    },
    mounted () {
        this.getList();
    }
}
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
  .item {
    margin-bottom: 18px;
    cursor: pointer;
  }
  .item:hover{
      color:#44b549
  }
  .curgroup{
      color:#44b549 
  }

</style>